<template>
    <div class="head-line">参与考核</div>
    <div class="box" v-show="if_show_exam_info">
        <div class="exam-title">
            <h2>{{dataList.examtitle}}</h2>
        </div>

        <div class="exam-content">
            <div class="content-item">
                <div class="exam-text">
                    <h3>{{dataList.id}}、{{dataList.examtext}}</h3>
                </div>

                <div class="exam-options">
                    <el-radio-group v-model="exam_options">
                        <el-radio label="A" size="large" border>A {{dataList.examoptionsa}}</el-radio>
                        <el-radio label="B" size="large" border>B {{dataList.examoptionsb}}</el-radio>
                        <el-radio label="C" size="large" border>C {{dataList.examoptionsc}}</el-radio>
                        <el-radio label="D" size="large" border>D {{dataList.examoptionsd}}</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>

    </div>

    <div class="but-box">
        <el-button type="primary" size="default" @click="getDatas" v-show="if_show_but">开始答题！</el-button>
        <el-button type="primary" size="default" @click="nextDatas" v-show="if_next_but">我答完了，下一题。</el-button>
        <el-button type="primary" size="default" @click="setDatas" v-show="if_save_but">答题完毕，交卷吧！</el-button>
        <!-- <el-button type="primary" size="default" @click="chongDdatas" v-show="if_chong_show_but">重新考试！</el-button> -->
    </div>

</template>
<script>
    import { ref, reactive, onMounted } from "vue";
    import axios from 'axios';
    export default {
        name: 'SupfilemdNav',
        setup() {

            // 全局变量
            let if_show_but = ref(true);
            let if_show_exam_info = ref(false);

            let if_next_but = ref(false);
            let if_save_but = ref(false);

            let if_chong_show_but = ref(false);


            let labelPosition = ref('top');

            let exam_data = reactive({
                sub: 0,
                sub_and: null,
                sub_ands: null,
                get_num: 1,
                examtitle: null,
            });

            let dataList = reactive({
                id: null,
                examtitle: null,
                examtext: null,
                examanswer: null,
                examoptionsa: null,
                examoptionsb: null,
                examoptionsc: null,
                examoptionsd: null
            });



            let exam_options = ref('');

            let if_array = [];
            let examanswer_array = [];
            let temp = 1;

            // 全局变量结束


            // 获取考题数据
            function getDatas() {
                axios.get(`http://localhost:8080/exams/${exam_data.get_num}`)
                    .then(function (response) {
                        // console.log(response.data.flag);

                        // response.data.flag;

                        // 判断是否显示
                        if (response.data.flag === true) {
                            if_show_but.value = false;
                            if_next_but.value = true;
                            if_show_exam_info.value = true;

                            // console.log(if_show_but.value);
                            // console.log(if_show_exam_info.value);

                            // dataList.value.data = response.data.data;
                            dataList.id = response.data.data.id;
                            dataList.examtitle = response.data.data.examtitle;
                            dataList.examtext = response.data.data.examtext;
                            dataList.examanswer = response.data.data.examanswer;
                            dataList.examoptionsa = response.data.data.examoptionsa;
                            dataList.examoptionsb = response.data.data.examoptionsb;
                            dataList.examoptionsc = response.data.data.examoptionsc;
                            dataList.examoptionsd = response.data.data.examoptionsd;
                        } else {
                            if_show_but.value = true;
                            if_show_exam_info.value = false;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }


            // 下一题
            function nextDatas() {
                // console.log("当前选项", exam_options.value);
                if_array.push(exam_options.value);

                // 清空上一次的选项   
                exam_options.value = '';
                // console.log("清理后选项", exam_options.value);


                let url = `http://localhost:8080/exams/`;
                axios.get(url)
                    .then(function (response) {
                        console.log(response.data.data);
                        console.log(exam_data.sub);

                        // 获取当前的数据长度
                        exam_data.sub_and = response.data.data.length;
                        exam_data.sub_ands = response.data.data;
                        console.log("info:", exam_data.sub_and);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })


                exam_data.get_num++;

                if (exam_data.get_num === exam_data.sub_and + 1) {
                    exam_data.get_num = null;
                    if_next_but.value = false;
                    if_save_but.value = true;

                }

                axios.get(`http://localhost:8080/exams/${exam_data.get_num}`)
                    .then(function (response) {
                        dataList.id = response.data.data.id;
                        dataList.examtitle = response.data.data.examtitle;
                        dataList.examtext = response.data.data.examtext;
                        dataList.examanswer = response.data.data.examanswer;
                        dataList.examoptionsa = response.data.data.examoptionsa;
                        dataList.examoptionsb = response.data.data.examoptionsb;
                        dataList.examoptionsc = response.data.data.examoptionsc;
                        dataList.examoptionsd = response.data.data.examoptionsd;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            }

            console.log("下一题选项", exam_options.value);
            console.log("选项array", if_array);

            function setDatas() {
                console.log("没有内容的方法");
                console.log("选项array", if_array);


                if (exam_data.sub_ands.length !== if_array.length) {
                    temp = 0;
                } else {
                    for (let i = 0; i < exam_data.sub_ands.length; i++) {

                        examanswer_array.push(exam_data.sub_ands[i].examanswer);
                    }

                    for (let i = 0; i < exam_data.sub_ands.length; i++) {
                        // examanswer


                        console.log("所有答案：", examanswer_array);

                        if (examanswer_array[i] !== if_array[i]) {
                            temp = 0;
                        }
                    }
                }

                if (temp) {
                    alert("考试满分，通过");
                    console.log(if_array);
                    console.log(examanswer_array);
                    if_array = [];
                    examanswer_array = [];
                } else {
                    alert("考试不及格，不通过");
                    console.log(if_array);
                    console.log(examanswer_array);
                    if_array = [];
                    examanswer_array = [];
                    console.log(if_array);
                    console.log(examanswer_array);
                    // if_chong_show_but.value = true;
                    exam_data.get_num = 0;
                    if_save_but.value = true;
                }

            }

            function chongDdatas() {
                exam_data.get_num = 1;
                axios.get(`http://localhost:8080/exams/${exam_data.get_num}`)
                    .then(function (response) {
                        // console.log(response.data.flag);

                        // response.data.flag;

                        // if_save_but
                        // 判断是否显示
                        if (response.data.flag === true) {
                            if_show_but.value = false;
                            if_next_but.value = true;
                            if_show_exam_info.value = true;
                            if_chong_show_but.value = false;

                            console.log(if_show_but.value);
                            console.log(if_show_exam_info.value);

                            if_array = [];
                            examanswer_array = [];

                            // dataList.value.data = response.data.data;
                            dataList.id = response.data.data.id;
                            dataList.examtitle = response.data.data.examtitle;
                            dataList.examtext = response.data.data.examtext;
                            dataList.examanswer = response.data.data.examanswer;
                            dataList.examoptionsa = response.data.data.examoptionsa;
                            dataList.examoptionsb = response.data.data.examoptionsb;
                            dataList.examoptionsc = response.data.data.examoptionsc;
                            dataList.examoptionsd = response.data.data.examoptionsd;
                        } else {
                            if_show_but.value = true;
                            if_show_exam_info.value = false;
                            if_chong_show_but.value = true;

                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }

            return {
                labelPosition,
                nextDatas,
                exam_options,
                exam_data,
                dataList,
                if_show_but,
                getDatas,
                if_show_exam_info,
                if_next_but,
                if_save_but,
                setDatas,
                if_chong_show_but,
                chongDdatas
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    .el-form {
        /* height: 250px; */
        padding: 0 500px 0 20px;
        background: #fff;
        /* border: 1px solid red; */
    }

    .v-md-editor {
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }

    /* .el-radio.is-bordered.is-checked {
        border-color: var(--el-color-primary);
        border-color: #51B37F !important;
    } */

    /* .el-radio.is-checked .el-radio {
        border-color: #51b37f !important;
        background: #51b37f !important;
    } */

    /* .el-radio__inner {
        border: 1px solid red;
        background: #000;
    } */

    /* .el-radio__input.is-checked+.el-radio__label {
        color: black
    } */

    /* 选择题 */
    .box {
        width: 100%;
        /* border: 1px solid red; */

    }

    /* 选题标题 */
    .box .exam-title {
        width: 100%;
        /* height: ; */
        /* border: 1px solid red; */
        border-bottom: 1px solid #eee;
        margin-bottom: 1em;
    }

    .box .exam-title h2 {
        width: 100%;
        height: auto;
        text-align: center;
        line-height: auto;
        /* border: 1px solid red;; */
    }

    /* 选择内容 */
    .box .exam-content {
        width: 100%;
        padding-left: 1em;
        /* border: 1px solid red; */
    }

    /* options 间距 */
    .el-radio {
        margin-top: 1em;
        margin-right: 1em;
    }
</style>